<template>
  <div class="app-container calendar-list-container" v-loading.body="listLoading">
    <div class="filter-container" v-if="!listLoading">
      <el-row :gutter="20">
        <el-col :span="2">
          <router-link to="/schedule/edit">
            <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="edit">添加团课</el-button>
          </router-link>
        </el-col>
      </el-row>
    </div>
    <full-calendar :events="fcEvents" @dayClick="dayClick" @eventClick="eventClick" @changeMonth="changeMonth" locale="zh-cn">
      <template slot="fc-event-card" slot-scope="p">
        <p>{{ p.event.title }}</p>
        <!--<p><i class="fa">sadfsd</i> {{ p.event.title }} test</p>-->
      </template>
    </full-calendar>
  </div>
</template>

<script>
import { GetAllSchdulesCourse } from '@/api/schedule'
import fullCalendar from 'vue-fullcalendar'
export default{
  components: {
    fullCalendar
  },
  data() {
    return {
      start_date: '',
      end_date: '',
      locale: 'zh-cn',
      listLoading: false,
      fcEvents: []
    }
  },
  methods: {
    loadTable() {
      this.listLoading = true
      const data = {
        start_date: this.start_date,
        end_date: this.end_date
      }
      GetAllSchdulesCourse(data).then(Res => {
        const R = Res.data
        if (R.length === 0) {
          this.listLoading = false
          return this.listLoading
        }
        const fcEvents = []
        for (const n in Res.data) {
          fcEvents[n] = {
            title: R[n].name,
            id: R[n].id,
            start: R[n].start_date,
            end: R[n].end_date
          }
        }
        this.fcEvents = fcEvents
        this.listLoading = false
      })
    },
    changeMonth(start, end) {
      this.start_date = start.format('YYYY-MM-DD')
      this.end_date = end.format('YYYY-MM-DD')
      this.loadTable()
    },
    dayClick(day) {
      this.$router.push({ path: `/schedule/edit?date=${day}` })
    },
    eventClick(event) {
      this.$router.push({ path: `/schedule/edit?id=${event.id}` })
    }
  }
}
</script>
